<template>
  <div class="dashboard-container">
    <el-card class="user-info-card">
      <div class="user-info-header">
        <img class="user-avatar" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="用户头像" />
        <div class="user-details">
          <h2 class="user-name">{{ userInfo.userName || userInfo.phoneNumber || userInfo.email || '未知用户' }}</h2>
          <div class="user-role">{{ getUserType(userInfo.userType) }}</div>
        </div>
        <el-button type="danger" @click="handleLogout">退出登录</el-button>
      </div>
      
      <div class="user-info-body">
        <h3>账户信息</h3>
        <el-divider />
        
        <div class="info-item">
          <span class="info-label">用户ID：</span>
          <span class="info-value">{{ userInfo.uid }}</span>
        </div>
        
        <div class="info-item" v-if="userInfo.userName">
          <span class="info-label">用户名：</span>
          <span class="info-value">{{ userInfo.userName }}</span>
        </div>
        
        <div class="info-item" v-if="userInfo.phoneNumber">
          <span class="info-label">手机号：</span>
          <span class="info-value">{{ userInfo.phoneNumber }}</span>
        </div>
        
        <div class="info-item" v-if="userInfo.email">
          <span class="info-label">邮箱：</span>
          <span class="info-value">{{ userInfo.email }}</span>
        </div>
        
        <div class="info-item">
          <span class="info-label">用户类型：</span>
          <span class="info-value">{{ getUserType(userInfo.userType) }}</span>
        </div>
        
        <div class="info-item">
          <span class="info-label">管理员：</span>
          <span class="info-value">{{ userInfo.isAdmin ? '是' : '否' }}</span>
        </div>
      </div>
    </el-card>
    
    <el-card>
      <template #header>
        <div class="card-header">
          <span>Token信息</span>
        </div>
      </template>
      
      <div class="info-item">
        <span class="info-label">Token：</span>
        <span class="info-value">{{ token }}</span>
      </div>
      
      <div class="info-item">
        <span class="info-label">过期时间：</span>
        <span class="info-value">{{ expiresIn }}秒</span>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/store/user'
import { logout } from '@/api/auth'

const router = useRouter()
const userStore = useUserStore()

// 用户信息
const userInfo = computed(() => userStore.userInfo)
const token = computed(() => userStore.token)
const expiresIn = computed(() => userStore.expiresIn)

// 获取用户类型名称
const getUserType = (type) => {
  const userTypes = {
    '0': '普通用户',
    '1': '商家用户',
    '7': '企业用户',
    '8': '政务主管部门用户',
    '9': '系统用户'
  }
  return userTypes[type] || '未知类型'
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      // 调用退出登录接口
      // 实际项目中应调用API进行退出登录
      // await logout()
      
      // 清除用户状态
      userStore.clearState()
      
      ElMessage.success('退出登录成功')
      
      // 跳转到登录页
      router.push('/login')
    } catch (error) {
      console.error(error)
      ElMessage.error('退出登录失败，请重试')
    }
  }).catch(() => {
    // 取消退出
  })
}
</script>

<style scoped>
/* 样式已在全局CSS中定义 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>